---
title: Custom Scrollbar
---

If you want to show a custom scrollbar UI of the Thread.Viewport in place of the system default, you can integrate `@radix-ui/react-scroll-area`.
An example implementation of this is [shadcn/ui's Scroll Area](https://ui.shadcn.com/docs/components/scroll-area).

## Add shadcn Scroll Area

```sh
npx shadcn@latest add scroll-area
```

### @radix-ui/react-scroll-area v1.2.0 release candidate required

The v1.2.0-rc.x release candidate can be installed via

```sh
pnpm add @radix-ui/react-scroll-area@next
```

## Additional Styles

The Radix UI Viewport component adds an intermediate `<div data-radix-scroll-area-content>` element.
Add the following CSS to your `globals.css`:

```css title="@/app/globals.css"
.thread-viewport > [data-radix-scroll-area-content] {
  @apply flex flex-col items-center self-stretch bg-inherit;
}
```

## Integration

- Wrap `Thread.Root` with `<ScrollAreaPrimitive.Root asChild>`
- Wrap `Thread.Viewport` with `<ScrollAreaPrimitive.Viewport className="thread-viewport" asChild>`
- Add shadcn's `<ScrollBar />` to `Thread.Root`

The resulting MyThread component should look like this:

```tsx {1-2,6,8,12-13,15}
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import { ScrollBar } from "@/components/ui/scroll-area";

const MyThread: FC = () => {
  return (
    <ScrollAreaPrimitive.Root asChild>
      <ThreadPrimitive.Root className="...">
        <ScrollAreaPrimitive.Viewport className="thread-viewport" asChild>
          <ThreadPrimitive.Viewport className="...">
            ...
          </ThreadPrimitive.Viewport>
        </ScrollAreaPrimitive.Viewport>
        <ScrollBar />
      </ThreadPrimitive.Root>
    </ScrollAreaPrimitive.Root>
  );
};
```
